<template>
  <div class="clearfix">
    <vueCropper
      ref="cropper"
      style="height:600px"
      :img="dialogImageUrl"
      :output-size="option.size"
      :output-type="option.outputType"
      :info="true"
      :full="option.full"
      :can-move="option.canMove"
      :can-move-box="option.canMoveBox"
      :original="option.original"
      :auto-crop="option.autoCrop"
      :fixed="option.fixed"
      :fixed-number="option.fixedNumber"
      :center-box="option.centerBox"
      :info-true="option.infoTrue"
      :fixed-box="option.fixedBox"
    />
    <el-button type="primary" class="right" style="margin-top: 15px;" @click="updateImg">更新图片</el-button>
  </div>
</template>

<script>
export default {
  props: ['dialogImageUrl'],
  data() {
    return {
      option: {
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        // autoCropWidth: 300, // 默认生成截图框宽度
        // autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [7, 5], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      }
    }
  },
  methods: {
    updateImg() {
      this.$refs.cropper.getCropBlob(data => {
        this.$emit('emitImage', data)
      })
    }
  }
}
</script>

<style>
</style>
